<template>
  <div>
    <el-button class="button-new-tag" icon="el-icon-plus" size="small" @click="open()" v-if="!disabled">
      {{ btnInfo }}
    </el-button>
    <div style="margin-bottom: 10px;">
      <div v-for="(item, index) in value" :key="index">
        {{ item.ocLeadName }}
        <el-button size="mini" type="text" @click="value.splice(index, 1)">删除</el-button>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="选择号码库" width="700px">
      <NormalForm :formList="formList" :isShowCard="false"
                  :operateForm="queryForm" style="position: relative" @handleReset="handleReset"
                  @specialSearch="handleQuery"></NormalForm>
      <span style="color: #082aff;font-size: 12px;position: absolute;left: 180px;top:100px">数据取拓客线索导入名单，每次只能选择一条</span>
      <el-table ref="multipleTable" v-loading="loading" :data="tableList" height="442px"
                style="width: 100%" @select="handleSelectionChange" @select-all="handleSelectAll">
        <el-table-column :single-select="true" type="selection" width="55"/>
        <el-table-column align="center" label="号码库名称" min-width="180px" prop="ocLeadName"
                         show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="ID" prop="ocLeadNo" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" label="数据来源" prop="dataFrom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" label="有效人数" prop="effectiveCount" show-overflow-tooltip/>
        <el-table-column align="center" label="创建时间" prop="createTime" show-overflow-tooltip/>
      </el-table>

      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {queryLeadList, queryOcLeadListNew} from '@/api/intelligentOutCall'

export default {
  name: 'checkNumberBase',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    btnInfo: {
      type: String,
      default: '选择号码库'
    },
    queryOcLeadType: {
      type: String,
      default: '1'
    },
  },
  watch: {
    value: {}
  },
  data() {
    return {
      visible: false,
      queryForm: {
        name: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '号码库名称',
          value: '',
          prop: 'ocLeadName',
          type: 'INPUT',
          emunName: '',
          xl: 6,
          lg: 6,
        },
      ],
      loading: false,
      total: 0,
      tableList: [],
      checkedList: [],
      drainageOpt: {},
    }
  },
  methods: {
    open() {
      this.handleQuery();
      this.visible = true;
      this.checkedList = JSON.parse(JSON.stringify(this.value))
    },
    ok() {
      this.value.splice(0, this.value.length)
      this.value.push(...this.checkedList);
      this.visible = false;
      this.$emit('change', this.value)
    },
    handleSelectionChange(selection, val) {
      console.log(selection, val)
      this.$refs.multipleTable.clearSelection();
      if (selection.length == 0) {
        this.selectedRow = [];  // 清空data中绑定的selectedRow
        return
      };
      // 切换最近一次选择数据的状态
      this.$refs.multipleTable.toggleRowSelection(val, true);
      // 更新data中的selectedRow
      this.checkedList = [{...val}];
      // console.log(val);
    },
    handleSelectAll(){
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(this.tableList.filter(item =>  item.ocLeadNo == this.checkedList[0].ocLeadNo)[0], true);
    },
    // 重置
    handleReset() {
      this.queryForm = {
        name: "",
      };
      this.getListFn();
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      let obj = {
        ...this.queryForm,
      };
      this.loading = true;
      this.checkedList = []
      if(this.queryOcLeadType == '1'){
        queryOcLeadListNew(obj).then((res) => {
          console.log(res, 'res')
          if (res.code === 200) {
            this.tableList = res.rows || [];
            this.$nextTick(() => {
              if (this.value.length > 0 && this.tableList.length > 0) {
                console.log(this.value, this.tableList, '134322')
                this.value.forEach(item => {
                  this.tableList.forEach(element => {
                    if (element.ocLeadNo == item.ocLeadNo) {
                      this.$refs.multipleTable.toggleRowSelection(element);
                    }
                  })
                })
              }
              console.log(this.tableList, 'tableList24432')
            })
            this.total = res.total || 0;
            this.loading = false
          }
        }).finally(() => this.loading = false);
      } else if(this.queryOcLeadType == '2') {
        queryLeadList(obj).then((res) => {
          console.log(res, 'res')
          if (res.code === 200) {
            this.tableList = res.rows || [];
            this.$nextTick(() => {
              if (this.value.length > 0 && this.tableList.length > 0) {
                console.log(this.value, this.tableList, '134322')
                this.value.forEach(item => {
                  this.tableList.forEach(element => {
                    if (element.ocLeadNo == item.ocLeadNo) {
                      this.$refs.multipleTable.toggleRowSelection(element);
                    }
                  })
                })
              }
              console.log(this.tableList, 'tableList24432')
            })
            this.total = res.total || 0;
            this.loading = false
          }
        }).finally(() => this.loading = false);
      }
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";
</style>
